﻿@namespace BootstrapBlazor.Components
@typeparam TValue
@inherits SingleSelectBase<TValue>

@if (IsShowLabel)
{
    <BootstrapLabel required="@Required" for="@InputId" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
}
<div @attributes="AdditionalAttributes" id="@Id" class="@ClassString">
    <CascadingValue Value="this" IsFixed="true">
        @Options
    </CascadingValue>
    <RenderTemplate>
        @{
            ResetSelectedItem();
        }
        <div class="dropdown-toggle" data-bs-toggle="@ToggleString" data-bs-placement="@PlacementString" data-bs-offset="@OffsetString" data-bs-custom-class="@CustomClassString">
            @if (DisplayTemplate != null)
            {
                <div id="@InputId" class="@InputClassString" tabindex="0">
                    @DisplayTemplate(SelectedItem)
                </div>
            }
            else
            {
                <input type="text" id="@InputId" readonly disabled="@Disabled" placeholder="@PlaceHolder" class="@InputClassString" value="@SelectedItem?.Text" />
                <span class="@AppendClassString"><i class="@DropdownIcon"></i></span>
            }
        </div>
        <div class="dropdown-menu">
            @if (ShowSearch)
            {
                <div class="@SearchClassString">
                    <input type="text" class="search-text form-control" @bind="@SearchText" @bind:event="oninput" aria-label="Search" />
                    <i class="@SearchIconString"></i>
                </div>
            }
            @foreach (var itemGroup in DataSource.GroupBy(i => i.GroupName))
            {
                if (!string.IsNullOrEmpty(itemGroup.Key))
                {
                    <Divider Text="@itemGroup.Key" />
                }
                @foreach (var item in itemGroup)
                {
                    <div class="@ActiveItem(item)" @onclick="@(e => OnClickItem(item))">
                        @if (ItemTemplate != null)
                        {
                            @ItemTemplate(item)
                        }
                        else
                        {
                            @item.Text
                        }
                    </div>
                }
            }
        </div>
        @if (!IsPopover)
        {
            <div class="dropdown-menu-arrow"></div>
        }
    </RenderTemplate>
</div>
